<template>
  <div class="">
    <el-drawer
      :title="firstRow && firstRow.id > 0? '编辑用户信息' : '添加用户'"
      :visible.sync="drawerShow"
      :direction="direction"
      :before-close="handleClose"
      :wrapper-closable="false"
      @open="toRenderComponent"
    >
      <el-divider />
      <div class="block">
        <x-l-form
          ref="xlform"
          :key="componentKey"
          :that="that"
          :edit-cfg="formCfg"
          :edit-data="formData"
          :edit-rules="ruleList"
          @submitFunc="submit"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import api from '@/api'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import XLForm from '@/components/XLForm'

export default {
  components: {
    XLForm
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    firstRow: {
      type: Object,
      default: () => {
        return {}
      }
    },
    roleData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    const checkPassWord = (rule, value, callback) => {
      if (value === '' || value === undefined || value === this.formData.password) {
        callback()
      }
      callback(new Error('两次填写的密码不一致'))
    }
    return {
      componentKey: 0,
      that: this,
      drawerShow: false,
      direction: 'rtl',
      form: {},
      // define options
      options: [],
      selValue: 0,
      formCfg: [
        { label: '账号', prop: 'username', type: 'input' },
        { label: '密码', prop: 'password', type: 'password' },
        { label: '确认密码', prop: 'confirm_password', type: 'password' },
        { label: '昵称', prop: 'nickname', type: 'input' },
        { label: '手机号', prop: 'mobile', type: 'input' },
        { label: '邮箱', prop: 'email', type: 'input' },
        { label: '是否管理员', prop: 'is_admin', type: 'switch' },
        { label: '是否禁用', prop: 'status', type: 'switch' }
      ],
      // 表单数据
      formData: {
        id: 0,
        username: null,
        password: null,
        nickname: null,
        mobile: null,
        email: null,
        is_admin: false,
        status: false
      },
      // 表单验证
      addFormRule: {
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          {
            pattern: /([*\D\d]){6,16}/,
            message: '密码由6到16位数字、字母、和特殊符号组成',
            trigger: 'blur'
          }
        ],
        confirm_password: [
          { required: true, message: '请填写确认密码', trigger: 'blur' },
          { validator: checkPassWord, trigger: 'blur' }
        ]
      },
      formRule: {
        username: [
          { required: true, message: '请填写账号', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_]{5,16}$/, message: '用户名由1-16位字母、数字、下划线组成', trigger: 'blur' }
        ],
        password: [
          { pattern: /^([*\D\d]){6,16}$/, message: '密码由6到16位数字、字母、和特殊符号组成', trigger: 'blur' }
        ],
        confirm_password: [
          { validator: checkPassWord, trigger: 'blur' }
        ],
        mobile: [
          { pattern: /^[1]([3-9])[0-9]{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        email: [
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ]
      },
      // 表单验证
      updateFormRule: {}
    }
  },
  inject: ['app'],
  computed: {
    ruleList: function() {
      if (this.firstRow && this.firstRow.id > 0) {
        return Object.assign({}, this.formRule, this.updateFormRule)
      } else {
        return Object.assign({}, this.formRule, this.addFormRule)
      }
    }
  },
  provide() {
    return {
      parents: this
    }
  },
  watch: {
    show(val) {
      this.drawerShow = val
    },
    firstRow: {
      handler(json) {
        if (json && json.id > 0) {
          this.formData.id = json.id
          this.formData.username = json.username
          this.formData.password = null
          this.formData.nickname = json.nickname
          this.formData.mobile = json.mobile
          this.formData.email = json.email
          this.formData.is_admin = json.is_admin === 1
          this.formData.status = json.status !== 0
        } else {
          this.formData.id = 0
          this.formData.username = null
          this.formData.password = null
          this.formData.nickname = null
          this.formData.mobile = null
          this.formData.email = null
          this.formData.is_admin = false
          this.formData.status = false
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleClose(done) {
      this.app.drawerShow = false
      if (done) {
        done()
      }
    },
    // 提交操作
    submit() {
      this.formData.status = this.formData.status === true ? 1 : 0
      this.formData.is_admin = this.formData.is_admin === true ? 1 : 0
      api.editUser(this.formData).then(() => {
        this.$notify({
          title: '消息提示',
          type: 'success',
          message: '操作成功',
          duration: 2000
        })
        this.app.getUsers()
        this.app.drawerShow = false
      }).catch(() => {
      })
    },
    toRenderComponent() {
      this.componentKey += 1
    }
  }
}
</script>

<style lang="scss">
.el-drawer__header span:focus {
  outline: 0;
}

.block {
  width: 90%;
  margin-top: 20px;
}

.el-drawer__header {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 1px;
}

.el-drawer.rtl {
  overflow: scroll;
}
</style>
